<template>
	<view v-if="isShow" :style="$store.state.skin">
		<view class="buy-box">
			<view class="center-box" :class="{ 'center-box2': !isbuy }">
				<view class="center-title">{{ iswito == 1 ? '委托' : '' }}{{ isbuy === true ? '买入' : '卖出' }}确定</view>
				<view class="center-content">
					<view class="col col1">
						<view class="">名称：{{ info.name || '' }}</view>
						<view class="">代码：{{ info.code || '' }}</view>
					</view>
					<view class="col col2">
						<view class="">
							数量：
							<text class="red">{{ info.num || '' }}</text>
						</view>
						<view class="">
							价格：
							<text class="red">{{ info.price || '' }}</text>
						</view>
					</view>
					<view class="col col3" v-if="isbuy === true">
						<view class="bold">管理费：0.03%</view>
						<view class="">
							市值：
							<text class="red">{{ (Number(info.num) * Number(info.price)).toFixed(2) }}</text>
							元
						</view>
					</view>
					<view class="col col4" v-if="isbuy === true">
						<view class="">
							需支付
							<text class="red">{{ (Number(info.num) * Number(info.price) * 0.0003).toFixed(2) }}</text>
							元
						</view>
					</view>
					<view class="col5" v-if="isbuy === true">
						<view class="">
							<checkbox-group @change="checkboxChange1">
								<checkbox style="transform: scale(0.6)" :checked="cb1" />
							</checkbox-group>
						</view>
						<view class="">
							<text>已阅读并同意相关</text>
							<text class="blue">合作协议</text>
						</view>
					</view>
					<view class="col6" v-if="isbuy === true">
						<view class="">
							<checkbox-group @change="checkboxChange2">
								<checkbox style="transform: scale(0.6)" :checked="cb2" />
							</checkbox-group>
						</view>
						<view class="">
							<text>已阅读并同意相关</text>
							<text class="blue">中投国际服务协议</text>
						</view>
					</view>
					<view class="col7">您是否确定以上操作?</view>
				</view>
				<view class="center-button">
					<view class="col col1" @click="close">取消</view>
					<view class="col col2" @click="sub">确定{{ isbuy === true ? '买入' : '卖出' }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'entrust',
	props: {
		iswito: {
			default() {
				return '';
			}
		},
		// 是否显示当前组件
		isShow: {
			type: Boolean,
			default() {
				return false;
			}
		},
		// 是否是买入确定
		isbuy: {
			type: Boolean,
			default() {
				return true;
			}
		},

		// 页面显示数据对象
		info: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	data() {
		return {
			cb1: true,
			cb2: true
		};
	},
	methods: {
		checkboxChange1(val) {
			this.cb1 = !this.cb1;
		},
		checkboxChange2(val) {
			this.cb2 = !this.cb2;
		},
		// 隐藏
		close() {
			this.$emit('close', false);
		},
		// 确定
		sub() {
			if (!this.cb1 || !this.cb2) {
				uni.showToast({
					title: '请勾选相关协议',
					icon: 'none'
				});
				return;
			}
			this.$emit('sub', '');
		}
	}
};
</script>

<style scoped lang="scss">
.buy-box {
	background-color: red;
	z-index: 10;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.5);
	.center-box {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #ffffff;
		width: 600rpx;
		border-radius: 10rpx;
		overflow: hidden;
		border-left: 2px solid var(--nav-bg);
		border-right: 2px solid var(--nav-bg);
		.center-title {
			height: 90rpx;
			background-color: var(--nav-bg);
			text-align: center;
			line-height: 90rpx;
			color: #ffffff;
			font-size: 34rpx;
			font-weight: 600;
		}
		.center-content {
			padding: 40rpx 40rpx 20rpx 40rpx;
			.col {
				display: flex;
				justify-content: space-between;
				padding: 14rpx 0;
				font-size: 28rpx;
				.red {
					color: var(--nav-bg);
				}
				.bold {
					font-weight: 700;
					color: black;
				}
			}
			.col5 {
				display: flex;
				align-items: center;
				padding: 10rpx;
				margin-left: -20rpx;
				.blue {
					color: blue;
					cursor: pointer;
				}
			}
			.col6 {
				display: flex;
				align-items: center;
				margin-left: -20rpx;
				padding: 10rpx;
				.blue {
					color: blue;
					cursor: pointer;
				}
			}
			.col7 {
				padding: 10rpx;
				font-size: 32rpx;
			}
		}
		.center-button {
			display: flex;
			.col {
				display: flex;
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				justify-content: center;
				border-top: 2rpx solid var(--nav-bg);
				border-bottom: 2rpx solid var(--nav-bg);
				font-weight: 700;
			}
			.col1 {
				border-right: 1rpx solid var(--nav-bg);
			}
		}
	}

	.center-box2 {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #ffffff;
		width: 600rpx;
		border-radius: 10rpx;
		overflow: hidden;
		border-left: 2px solid var(--nav-bg);
		border-right: 2px solid var(--nav-bg);
		.center-title {
			height: 90rpx;
			background-color: var(--nav-bg);
			text-align: center;
			line-height: 90rpx;
			color: #ffffff;
			font-size: 34rpx;
			font-weight: 600;
		}
		.center-content {
			padding: 40rpx 40rpx 20rpx 40rpx;
			.col {
				display: flex;
				justify-content: space-between;
				padding: 14rpx 0;
				font-size: 28rpx;
				.red {
					color: red;
				}
				.bold {
					font-weight: 700;
					color: black;
				}
			}
			.col5 {
				display: flex;
				align-items: center;
				padding: 10rpx;
				margin-left: -20rpx;
				.blue {
					color: blue;
					cursor: pointer;
				}
			}
			.col6 {
				display: flex;
				align-items: center;
				margin-left: -20rpx;
				padding: 10rpx;
				.blue {
					color: blue;
					cursor: pointer;
				}
			}
			.col7 {
				padding: 10rpx;
				font-size: 32rpx;
			}
		}
		.center-button {
			display: flex;
			.col {
				display: flex;
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				justify-content: center;
				border-top: 2rpx solid var(--nav-bg);
				border-bottom: 2rpx solid var(--nav-bg);
				font-weight: 700;
			}
			.col1 {
				border-right: 1rpx solid var(--nav-bg);
			}
		}
	}
}
</style>
